<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>默认管理</el-breadcrumb-item>
      <el-breadcrumb-item>默认列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 2. 为 ECharts 准备一个具备大小（宽高）的 DOM -->
      <div id="guahao" style="width: 100%;height:400px;"></div>


      <div id="areaYN" style="width: 100%;height:800px;"></div>
    </el-card>
  </div>
</template>


<script>
// 1.引入 echarts
import echarts from 'echarts'
import _ from 'lodash'

import '../../../node_modules/echarts/map/js/china.js'

export default {
  data() {
    return {
      // 需要合并的数据
      optionsGh: {
        title: {
          text: '挂号数据',
          subtext: '纯属虚构',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56',
            },
          },
        },
        legend: {
          data: [
            {
              name: '均价',
              // 强制设置图形为圆。
              /* icon: 'circle',
              // 设置文本为红色
              textStyle: {
                color: 'red',
              }, */
            },
            {
              name: '挂号量',
              // 强制设置图形为圆。
              /* icon: 'circle',
              // 设置文本为红色
              textStyle: {
                color: 'red',
              }, */
            },
          ],
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: [],
          },
          {
            type: 'category',
            boundaryGap: true,
            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '价格',
            max: 20,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
          {
            type: 'value',
            scale: true,
            name: '挂号数量',
            max: 1000,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
        ],
        series: [
          {
            name: '挂号量',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            // data:[]
          },
          {
            name: '均价',
            type: 'line',
            // data: []
          },
        ],
      },
      optionsAreaYN: {
        title: {
          text: '中国数据',
          subtext: '纯属虚构',
        },
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['orangered', 'yellow', 'lightskyblue']
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: true,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
      }
    }
  },
  created() {},
  // 3. 执行到 mounted 函数，说明 dom 元素已经被渲染完毕
  mounted() {
    this.guhao(), this.areaYN()
  },
  methods: {
    async guhao() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('guahao'))

      const { data: res } = await this.$http.get('/counts/1')

      if (res.code !== 1) {
        return this.$message.error(res.msg)
      }

      this.optionsGh.xAxis[0].data = (function() {
        var now = new Date()
        var res = []
        var len = 11
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''))
          now = new Date(now - 2000)
        }
        return res
      })()

      this.optionsGh.xAxis[1].data = (function() {
        var res = []
        var len = 11
        while (len--) {
          res.push(11 - len - 1)
        }
        return res
      })()

      // 4. 准备数组配置项
      const result = _.merge(res.data, this.optionsGh)
      myChart.setOption(result)

      console.log(result)
      // 5. 使用刚指定的配置项和数据显示图表。
      myChart.count = 11
      setInterval(function() {
        var axisData = new Date().toLocaleTimeString().replace(/^\D*/, '')

        var data0 = result.series[0].data
        var data1 = result.series[1].data
        data0.shift()
        data0.push(Math.round(Math.random() * 1000))
        data1.shift()
        data1.push((Math.random() * 10 + 5).toFixed(1) - 0)

        result.xAxis[0].data.shift()
        result.xAxis[0].data.push(axisData)
        result.xAxis[1].data.shift()
        result.xAxis[1].data.push(myChart.count++)

        myChart.setOption(result)
      }, 2100)
    },
    areaYN() {
      var myChart = echarts.init(document.getElementById('areaYN'))

      this.optionsAreaYN.series = [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '启动次数', // 浮动框的标题
              type: 'map',
              geoIndex: 0,
              data: [{
                "name": "北京",
                "value": 599
              }, {
                "name": "上海",
                "value": 142
              }, {
                "name": "黑龙江",
                "value": 44
              }, {
                "name": "深圳",
                "value": 92
              }, {
                "name": "湖北",
                "value": 810
              }, {
                "name": "四川",
                "value": 453
              }]
            }
          ]

      myChart.setOption(this.optionsAreaYN)
    }
  },
  computed: {},
}
</script>

<style lang="scss" scoped>
</style>